<!--购买会员-->
<template>
  <div :class="['bg', isShow ? 'bg-color' : '']" @click="hideClick">
    <div class="all"></div>

    <div class="content bg2" v-if="isShow" @click="click">

      <!--标题-->
      <div class="title">
        <text class="font28 text1">{{ T('购买')}}</text>

        <div class="all"></div>
        <text v-if="noBuy" class="font28 warning-t1">{{T('VTN余额不足')}}</text>
      </div>

      <div class="cell bg1" :class="[select==index ? 'cell-sele' : '']" v-for="(item, index) in datas" :key="index"
        @click="cellClick(item, index)">
        <text class="font28 text1">{{item.voiceCount}}</text>
        <div class="all"></div>
        <template v-if="Number(item.originalPrice) != Number(item.currentPrice)">
          <text class="font24 text2" style="text-decoration:line-through">{{item.originalPrice+'VTN'}}</text>
          <div class="width10"></div>
        </template>
        <text class="font28 text1">{{item.currentPrice+'VTN'}}</text>
      </div>

      <div v-if="noBuy" class="but main-bt1" @click="buyVtnClick">
        <text class="font30 text1">{{T('去充值')}}</text>
      </div>
      <template v-else>
        <div :class="['but', noBuy ? 'no1' : 'main-bt1']" @click="bugClick">
          <text class="font30 text1">{{T('立即购买')}}</text>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  //功能
  import modal from "@/_js/modal";
  import math from "@/_js/math";
  import Config from "@/_js/config";
  import navigator from "@/_js/navigator";
  import broadcast from "@/_js/broadcast";

  const weexFunction = weex.requireModule("WeexFunction");
  import weexHttp from "@/_js/https";

  import I18N from "@/_i18n/i18n";
  var T = I18N.t;

  export default {
    data() {
      return {
        T: T,
        math: math,
        Config: Config,
        isShow: false,
        datas: [],
        vtnAmount: undefined, //VTN余额-带提现权益
        select: 0, //选中序号
        vtn: undefined, //应付金额
        noBuy: false, //true买不起
      };
    },

    mounted() {
      //延时访问-避免无法弹出加载LOG
      setTimeout(() => {
        this.httpQueryMemberDetail();
      }, 200);
    },

    methods: {
      initData() {
        try {
          var data = this.datas[this.select];
          this.noBuy =
            math.getNumber(data.currentPrice) > math.getNumber(this.vtnAmount);
        } catch (error) {}
      },

      /********************************** HTTP*/
      //获取会员信息
      httpQueryMemberDetail() {
        modal.showLoad();
        var param = {};
        weexHttp.post("member/queryMemberDetail", param, true, (data) => {
          if (data.status == 200) {
            data = data.data;
            this.vtnAmount =
              math.getNumber(data.vtnAmount) <
              math.getNumber(data.vtnEquityAmount)
                ? data.vtnAmount
                : data.vtnEquityAmount;
            this.httpPhoneCount();
          } else {
            modal.hideLoad();
            modal.toast(data.msg);
            this.hideClick();
          }
        });
      },
      httpPhoneCount() {
        weexHttp.post("indicator/getVoicePriceConfig", {}, true, (data) => {
          modal.hideLoad();
          if (data.status == 200) {
            data = data.data;
            this.datas = data;
            this.initData();
            this.isShow = true;
          } else {
            modal.hideLoad();
            modal.toast(data.msg);
            this.hideClick();
          }
        });
      },
      //购买条数
      httpBuyPhone() {
        var data = this.datas[this.select];
        modal.showLoad();
        var param = { discountId: parseInt(data.discountId) };
        weexHttp.postX("indicator/buyVoiceCount", param, true, (data) => {
          modal.hideLoad();
          if (data.status == 200) {
            broadcast.send(broadcast.PHONE_BUY_OK);
            modal.toast(T("购买成功"));
            this.hideClick();
          } else {
            modal.toast(data.msg);
          }
        });
      },

      /********************************** 点击*/
      //遮挡隐藏点击
      click() {},

      //隐藏
      hideClick() {
        navigator.dismiss();
      },

      //去充值
      buyVtnClick() {
        this.hideClick();
        var nav = { navColor: "#0c0c0c" };
        var param = { wallet: "consumeWallet" };
        navigator.open("", "wallet/WalletBuy", param, nav);
      },

      //购买
      bugClick() {
        if (this.noBuy) {
          return;
        }

        var data = this.datas[this.select];
        var parm = {
          title: T("确认购买"),
          message: T("确认使用&{1}VTN购买&{2}条语音")
            .replace("&{1}", data.currentPrice)
            .replace("&{2}", data.voiceCount),
          okBtn: T("确认"),
          cancelBtn: T("取消"),
        };
        modal.confirm(parm, (bool) => {
          if (bool == "true") {
            this.httpBuyPhone();
          } else {
          }
        });
      },

      //列表点击
      cellClick(item, index) {
        this.select = index;
        this.initData();
      },
    },
  };
</script>


<style src="@/_css/style.css" ></style>
<style scoped>
  .bg {
    align-items: flex-start;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .bg-color {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .content {
    width: 750px;

    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 60px;

    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
  }
  .title {
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 30px;
  }

  .cell {
    flex-direction: row;
    align-items: center;
    height: 80px;
    border-radius: 40px;
    border: 2px solid;
    margin-bottom: 20px;
    padding: 0 40px;
  }
  .cell-sele {
    border-width: 2px;
    border-color: #1677fe;
  }
  .but {
    /* background-image:linear-gradient(to right, #1677fe, #31afff); */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 80px;
    border-radius: 12px;
    margin-top: 30px;
  }
</style>